<template>
  <div>
    <ul>
      <li v-for="(item,index) in goodsList" v-if="item.isEmptyBoxAdd !== '1'" :key="item" class="goods_item">
        <div class="gi_wrap">
          <!--左图 开始-->
          <div :class="goodsListType === 'goodsList' ? 'img_wrap' : 'img_wrap_selected'">
            <image v-if="item.imageUrl" :src="item.imageUrl" mode="widthFix" />
          </div>
          <!--左图 结束-->

          <!--右描述 开始-->
          <div class="goods_desc" :style="{ maxWidth: goodsListType === 'goodsList' ? '460rpx' : '' }">
            <!-- 条形码 开始 -->
            <div class="bar_code">
              <span>商品名称:</span>
              <span>{{ item.goodsName }}</span>
            </div>
            <div>商品类型:&nbsp&nbsp&nbsp&nbsp&nbsp{{ item.goodsTagName }}</div>
            <!-- 条形码 结束 -->

            <!-- 文字描述 开始 -->
            <div class="txt_desc">
              <image v-if="item.isGoodsAc" class="goodsac" src="http://121.41.75.32:8002/file/static/goodsac.png" mode="widthFix" />
            </div>
            <div class="tag" v-if="item.giftId">{{ item.goodsTagName }}</div>
            <!-- 文字描述 结束 -->

            <!-- 价格 开始 -->
            <div class="price_wrap">
              <!-- 1价格及箱数  开始-->
              <div class="price_uni_wrap">
                <div class="price_item">
                  <!-- 左价格 开始-->
                  <div  v-if="item.mobileOrderIsAllowShowTaxPrice === '1'">
                    <span class="pn_num">￥{{  item.isZeroPrice?0:item.billTaxPrice || item.taxPrice }} </span>
                    <span class="pn_unit">/{{ item.mainUnitName }}</span>
                  </div>
                  <div v-else></div>
                  <!-- 左价格 结束-->

                  <!-- 右数字 开始-->
                  <div class="num_wrap">
<!--                    <span class="op" @click="handleSub(index,'mainNum')">-</span>-->
                    <!-- v-model="item.secondUnitCount" @confirm="handleConfirm"-->
                    <view v-if="item.giftId || item.isPromotion">{{ item.mainNum }}</view>
                    <input v-else class="op_number" type="number"  @blur="myinput(item)" v-model="item.mainNum" />{{ item.mainUnitName }}
<!--                    <span class="op" @click="handleAdd(index,'mainNum')">+</span>-->
                  </div>
                  <!-- 右数字 结束-->
                </div>
                <div class="price_item">
                  <!-- 左价格 开始-->
                  <div v-if="item.mobileOrderIsAllowShowTaxPrice === '1'">
                    <span class="pn_num">￥{{ item.isZeroPrice?0:item.billTaxBoxPrice || item.taxBoxPrice }} </span>
                    <span class="pn_unit">/{{ item.boxUnitName }}</span>
                  </div>
                  <div style="color: blue" @click="goodsRemarkShow(index)">商品备注</div>
                  <!-- 左价格 结束-->

                  <!-- 右数字 开始-->
                  <div class="num_wrap">
<!--                    <span class="op" @click="handleSub(index, 'boxNum')">-</span>-->
                    <view v-if="item.giftId || item.isPromotion">{{ item.boxNum }}</view>
                    <input v-else class="op_number" type="number"  @blur="myinput(item)"   v-model="item.boxNum" />{{ item.boxUnitName }}
<!--                    <span class="op" @click="handleAdd(item, 'boxNum')">+</span>-->
                  </div>
                  <!-- 右数字 结束-->
                </div>
              </div>
              <!-- 价格及箱数  结束-->

              <!-- 2购物 开始-->
              <div class="go_buy" :class="goodsListType === 'selectedGoodsList' ? 'go_buy_select' : ''">
                <image v-if="goodsListType === 'goodsList'" class="go_buy_img" @click="handleSelectGoods(item)" src="http://121.41.75.32:8002/file/static/selectgoods.png" mode="widthFix" />
                <image v-if="goodsListType === 'selectedGoodsList'" class="go_buy_img" @click="onDeleteGoods(index)" src="http://121.41.75.32:8002/file/static/deleteicon.png" mode="scaleToFill" />
              </div>
              <!-- 购物 结束 -->
            </div>

            <!-- 价格 结束 -->
          </div>
          <!--右描述 结束-->
        </div>
      </li>
    </ul>
    <remark v-if="showGoodsRemark"  :value="remark" @saveRemark="updateOrderRemark" @showFalse="showGoodsRemark = false"></remark>
  </div>
</template>

<script>
import remark from "../remark";
// 商品图
export default {
  name: 'goodsList',
  components: {remark},
  props: {
    // 商品列表数据
    goodsList: {
      type: Array,
      default: [],
    },
    selectedGoodsData: {
      type: Object,
      default: {},
    },
    // 商品列表类型：  是主列表goodsList 还是 购物车列表  selectedGoodsList
    goodsListType: {
      type: String,
      default: 'goodsList',
    },

    // 是否展示 选中按钮
    isShowSelectedBtn: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      showGoodsRemark: false,
      goodsIndex:0,
      remark:'',
    }
  },
  methods: {
    myinput(row) {
      const boxCount = parseInt(Number(row.mainNum)/Number(row.boxUnitCount))
      const mainCount = Number(row.mainNum)%Number(row.boxUnitCount)
      row.boxNum  = Number(row.boxNum) + boxCount
      row.mainNum =  Number(mainCount)
      row.goodsCount = Number(row.boxNum) * Number(row.boxUnitCount) + Number(row.mainNum)
      if (row.isUpdate){
        row.taxPrice = row.newTaxPrice
        row.taxBoxPrice = row.newTaxBoxPrice
      }
      if (row.isPromotion === 1 && row.promotionType === '1'){
        if ((row.goodsCount <= row.cutOffGoodsCount && row.goodsCount >= row.effectGoodsCount) || row.cutOffGoodsCount === 0 || (row.cutOffGoodsCount > 0 && row.goodsCount <= row.cutOffGoodsCount)){
          row.taxPrice = row.promotionTaxPrice
          row.taxBoxPrice = row.promotionTaxBoxPrice
        }
      }else{
        if (row.isZeroPrice){
          row.taxPrice = 0
          row.taxBoxPrice = 0
          row.taxAmount = 0
          return
        }
        row.taxPrice = row.joldTaxPrice
        row.taxBoxPrice = row.joldTaxBoxPrice
      }
      row.taxAmount = row.goodsCount * Number(row.taxPrice)
      this.$emit('update:goodsList',this.goodsList)
      this.$forceUpdate()
      let sumGoodsAmount = 0
      this.goodsList.forEach((item)=>{
        sumGoodsAmount += item.taxAmount
      })

      this.$emit('sumGoodsAmount', sumGoodsAmount)
    },
    // 输入完成后
    handleConfirm(row) {
      const boxCount = parseInt(Number(row.mainNum)/Number(row.boxUnitCount))
      const mainCount = Number(row.mainNum)%Number(row.boxUnitCount)
      row.boxNum += boxCount
      row.mainNum = mainCount
      row.goodsCount = row.boxNum * Number(row.boxUnitCount) + row.mainNum
      row.taxAmount = row.goodsCount * row.taxPrice
      console.log(this.goodsList.reduce((sum, item)=>{
        return sum + item.taxAmount
      }))
      this.$emit('SumGoodsAmount', false)
    },


    // 减
    handleSub(index, key) {
      if (key === 'boxNum') {
        this.goodsList[index].boxNum--
      } else {
        this.goodsList[index].mainNum--
      }
    },
    // 加
    handleAdd(item, key) {
      if (key === 'boxNum') {
        item.boxNum++
      } else {
        item.mainNum++
      }
      console.log(item)
      this.$forceUpdate()
    },

    // 选中
    handleSelectGoods(item) {
      this.$emit('handleSelectGoods', {item})
    },

    // 删除某个订单
    onDeleteGoods(index) {
      this.$emit('onDeleteGoods', index)
    },
    updateOrderRemark(val){
      this.$set(this.goodsList[this.goodsIndex],'remark',val)
      this.showGoodsRemark = false
      this.$emit('update:goodsList',this.goodsList)
    },
    goodsRemarkShow(index){
      console.log(this.goodsList[index])
      this.remark = this.goodsList[index].remark
      this.goodsIndex= index
      console.log(this.remark)
      this.showGoodsRemark = true
    },
  }
}
</script>

<style scoped lang="scss">
.gift{
  width: 30rpx;
  height: 30rpx;
  color: #f2e85e;
  background-color: red;
  font-size: 16rpx;
  border-radius: 25rpx;
}
.goods_item {
  padding: 10rpx 15rpx;
  // 商品图
  .img_wrap {
    width: 120rpx;
    height: 120rpx;
  }
  .img_wrap_selected {
    width: 220rpx;
    height: 220rpx;
  }
  .gi_wrap {
    display: flex;
    border-bottom: 1px solid #ddd;
    .bar_code {
      color: rgba(102, 102, 102, 1);
      padding-bottom: 10rpx;
    }
    .goods_desc {
      flex: 1;

      padding: 10rpx;
      .txt_desc {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden; //溢出内容隐藏
        text-overflow: ellipsis; //文本溢出部分用省略号表示
        display: -webkit-box; //特别显示模式
        -webkit-line-clamp: 2; //行数
        line-clamp: 2;
        -webkit-box-orient: vertical; //盒子中内容竖直排列
        color: rgba(51, 51, 51, 1) !important;
        padding-bottom: 10rpx;
        .goodsac {
          width: 40rpx;
          vertical-align: middle;
          display: inline-block;
        }
      }
      .price_wrap {
        display: flex;

        // 价格及箱数
        .price_uni_wrap {
          flex: 1;
          .price_item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10rpx;
            .pn_num {
              color: rgba(51, 51, 51, 1);
              font-size: 32rpx;
            }
            .pn_unit {
              color: rgba(102, 102, 102, 1);
              font-size: 24rpx;
            }
            .num_wrap {
              display: flex;
              justify-content: space-around;
              align-items: center;
              .op {
                font-size: 60rpx;
                width: 60rpx;
                height: 60rpx;
                // text-align: center;
                // line-height: 60rpx;
                display: flex;
                align-items: center;
                justify-content: center;
              }
              .op_number {
                text-align: center;
                display: inline-block;
                margin: 0 10rpx;
                width: 100rpx;
                height: 60rpx;
                background-color: rgba(255, 239, 234, 1);
              }
            }
          }
        }
        // 购买--商品主列表
        .go_buy {
          width: 40rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .go_buy_img {
            width: 40rpx;
          }
        }
        // 已选中的列表
        .go_buy.go_buy_select {
          width: 80rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .go_buy_img {
            width: 70rpx;
            height: 70rpx;
          }
        }
      }
    }
  }
}
.tag{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(24deg);
  right: 30%;
  z-index: 5;
  width: 200rpx;
  height: 100rpx;
  font-size: 50rpx;
  border: rgba(255,0,0,0.3) solid 4px;
  color: rgba(255,0,0,0.3);
}
</style>
